<template>
  <div>
    <!-- <div style="display: flex;justify-content: center;">
      <el-button type="success" :icon="Bell">24年录取数据陆续整理上传中，预计6月份更新完成</el-button>
    </div> -->
    <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick">
      <el-tab-pane label="初试考试范围" :name="1"></el-tab-pane>
      <el-tab-pane label="参考书目" :name="2"></el-tab-pane>
    </el-tabs>
    <div class="exam-scope mohu" v-if="activeName == 1">
      <div class="con" v-loading="loading" element-loading-text="数据加载中...">
        <div class="item">
          <div class="left">研究方向</div>
          <div class="right">{{ obj.researchDirection }}</div>
        </div>
        <div class="item">
          <div
            style="
              height: 100%;
              flex: 1;
              display: flex;
              align-items: center;
              border-right: 1px solid #dcdfe6;
            "
          >
            <div class="left">政治</div>
            <div class="right">{{ obj.examContentsPolitics }}</div>
          </div>
          <div
            style="height: 100%; flex: 1; display: flex; align-items: center"
          >
            <div class="left">英语</div>
            <div class="right">{{ obj.examContentsEnglish }}</div>
          </div>
        </div>
        <div class="item">
          <div
            style="
              height: 100%;
              flex: 1;
              display: flex;
              align-items: center;
              border-right: 1px solid #dcdfe6;
            "
          >
            <div class="left">专业课一</div>
            <div class="right">{{ obj.examContentsOther1 }}</div>
          </div>
          <div
            style="height: 100%; flex: 1; display: flex; align-items: center"
          >
            <div class="left">专业课二</div>
            <div class="right">{{ obj.examContentsOther2 }}</div>
          </div>
        </div>
        <div
          class="item"
          style="
            text-align: center;
            width: 100%;
            display: block;
            padding: 3px 0;
          "
        >
          {{ obj.examContents }}&nbsp;
        </div>
      </div>
      <div v-if="isUnlock" class="mohu-filter">
        <el-button type="success" @click="onUnlock">
          <el-icon class="el-icon--right"><Key /></el-icon> <span>解锁</span>
        </el-button>
      </div>
    </div>
    <div v-if="activeName == 2" style="margin-top: 20px">
      <div class="table">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>初试参考书目</span>
            </div>
          </template>
          <div class="mohu" style="padding: 20px">
            <el-table
              v-loading="loading"
              stripe
              element-loading-text="数据加载中..."
              empty-text="暂无数据，请重新选择条件查询"
              :data="tableData1"
              style="width: 100%"
            >
              <el-table-column prop="schoolName" label="学校名称" />
              <el-table-column prop="majorCourseCode" label="专业课代码" />
              <el-table-column prop="majorCourseName" label="专业课名称" />
              <el-table-column prop="referBook" label="参考书目名称" />
              <el-table-column prop="publishClub" label="出版社" />
              <el-table-column prop="author" label="作者" />
            </el-table>
            <div v-if="isUnlock" class="mohu-filter">
              <el-button type="success" @click="onUnlock">
                <el-icon class="el-icon--right"><Key /></el-icon>
                <span>解锁</span>
              </el-button>
            </div>
          </div>
        </el-card>
      </div>
      <div class="table" style="margin-top: 20px;">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>复试参考书目</span>
            </div>
          </template>
          <div class="mohu" style="padding: 20px">
            <el-table
              v-loading="loading"
              stripe
              element-loading-text="数据加载中..."
              empty-text="暂无数据，请重新选择条件查询"
              :data="tableData2"
              style="width: 100%"
            >
              <el-table-column prop="schoolName" label="学校名称" />
              <el-table-column prop="majorCourseCode" label="专业课代码" />
              <el-table-column prop="majorCourseName" label="专业课名称" />
              <el-table-column prop="researchDirection" label="研究方向名称" />
              <el-table-column prop="referBook" label="参考书目名称" />
              <el-table-column prop="publishClub" label="出版社" />
              <el-table-column prop="author" label="作者" />
            </el-table>
            <div v-if="isUnlock" class="mohu-filter">
              <el-button type="success" @click="onUnlock">
                <el-icon class="el-icon--right"><Key /></el-icon>
                <span>解锁</span>
              </el-button>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script setup>
import {
  Bell,
} from "@element-plus/icons-vue";
import { ref, onMounted, defineProps } from "vue";
import { examRange, earlyRefer, fuRefer } from "@/api/api";
import { decrypt } from "@/utils/parseDate";
import { defineEmits } from "vue";
import { ElMessage } from "element-plus";
import { useStore } from "vuex";
const store = useStore();
const emit = defineEmits(["onChange"]);
// 点击tab
const activeName = ref(1);
const handleClick = (event) => {
  console.log(event);
  if (event == 1) {
  } else if (event == 2) {
  }
};
// 点击解锁
function onUnlock() {
  emit("onChange", { isUnlock: true });
}
const props = defineProps({
  majorId: String,
});
const tableData1 = ref([]);
const tableData2 = ref([]);
// 所有数据
const allData = ref([]);
// 加载状态
const loading = ref(false);
const obj = ref({});
// 是否显示模糊效果
const isUnlock = ref(false);
// 初试参考书目
async function getEarlyRefer() {
  try {
    loading.value = true;
    const data = {
      majorOutRelationId: props.majorId,
    };
    const result = await earlyRefer(data);
    const res = JSON.parse(decrypt(result));
    console.log(res, 2);
    if (res.status == 8) {
      store.commit("setTipsDialog", true);
    }
    if (res.status == 9) {
      store.commit("setNumberDialog", true);
    }
    if (res.status == 666) {
      ElMessage({
        message: res.msg,
        type: "warning",
        showClose: true,
      });
      isUnlock.value = true;
      emit("onChange", { isUnlock: true });
      tableData1.value = [
        {
          ssnf: "请解锁查看",
          zymc: "请解锁查看",
          zydm: "请解锁查看",
          researchDirection: "请解锁查看",
          xm: "请解锁查看",
          yzyxxmc: "请解锁查看",
          zcj: "请解锁查看",
          cs: "请解锁查看",
          fs: "请解锁查看",
        },
        {
          ssnf: "请解锁查看",
          zymc: "请解锁查看",
          zydm: "请解锁查看",
          researchDirection: "请解锁查看",
          xm: "请解锁查看",
          yzyxxmc: "请解锁查看",
          zcj: "请解锁查看",
          cs: "请解锁查看",
          fs: "请解锁查看",
        },
        {
          ssnf: "请解锁查看",
          zymc: "请解锁查看",
          zydm: "请解锁查看",
          researchDirection: "请解锁查看",
          xm: "请解锁查看",
          yzyxxmc: "请解锁查看",
          zcj: "请解锁查看",
          cs: "请解锁查看",
          fs: "请解锁查看",
        },
        {
          ssnf: "请解锁查看",
          zymc: "请解锁查看",
          zydm: "请解锁查看",
          researchDirection: "请解锁查看",
          xm: "请解锁查看",
          yzyxxmc: "请解锁查看",
          zcj: "请解锁查看",
          cs: "请解锁查看",
          fs: "请解锁查看",
        },
        {
          ssnf: "请解锁查看",
          zymc: "请解锁查看",
          zydm: "请解锁查看",
          researchDirection: "请解锁查看",
          xm: "请解锁查看",
          yzyxxmc: "请解锁查看",
          zcj: "请解锁查看",
          cs: "请解锁查看",
          fs: "请解锁查看",
        },
        {
          ssnf: "请解锁查看",
          zymc: "请解锁查看",
          zydm: "请解锁查看",
          researchDirection: "请解锁查看",
          xm: "请解锁查看",
          yzyxxmc: "请解锁查看",
          zcj: "请解锁查看",
          cs: "请解锁查看",
          fs: "请解锁查看",
        },
        {
          ssnf: "请解锁查看",
          zymc: "请解锁查看",
          zydm: "请解锁查看",
          researchDirection: "请解锁查看",
          xm: "请解锁查看",
          yzyxxmc: "请解锁查看",
          zcj: "请解锁查看",
          cs: "请解锁查看",
          fs: "请解锁查看",
        },
        {
          ssnf: "请解锁查看",
          zymc: "请解锁查看",
          zydm: "请解锁查看",
          researchDirection: "请解锁查看",
          xm: "请解锁查看",
          yzyxxmc: "请解锁查看",
          zcj: "请解锁查看",
          cs: "请解锁查看",
          fs: "请解锁查看",
        },
        {
          ssnf: "请解锁查看",
          zymc: "请解锁查看",
          zydm: "请解锁查看",
          researchDirection: "请解锁查看",
          xm: "请解锁查看",
          yzyxxmc: "请解锁查看",
          zcj: "请解锁查看",
          cs: "请解锁查看",
          fs: "请解锁查看",
        },
        {
          ssnf: "请解锁查看",
          zymc: "请解锁查看",
          zydm: "请解锁查看",
          researchDirection: "请解锁查看",
          xm: "请解锁查看",
          yzyxxmc: "请解锁查看",
          zcj: "请解锁查看",
          cs: "请解锁查看",
          fs: "请解锁查看",
        },
      ];
      loading.value = false;
    }
    if (res.status === 0 && res.result.length > 0) {
      allData.value = res.result;
      tableData1.value = res.result;
      loading.value = false;
      isUnlock.value = false;
    } else {
      tableData1 = [];
      allData = [];
      selectYear.value = "";
      yearOptions.value = [];
      loading.value = false;
    }
  } catch (error) {
    loading.value = false;
    // throw new Error(error)
  }
}
// 复试参考书目
async function getFuRefer() {
  try {
    loading.value = true;
    const data = {
      majorOutRelationId: props.majorId,
    };
    const result = await fuRefer(data);
    const res = JSON.parse(decrypt(result));
    console.log(res, 2);
    if (res.status == 666) {
      ElMessage({
        message: res.msg,
        type: "warning",
        showClose: true,
      });
      isUnlock.value = true;
      emit("onChange", { isUnlock: true });
      tableData2.value = [
        {
          ssnf: "请解锁查看",
          zymc: "请解锁查看",
          zydm: "请解锁查看",
          researchDirection: "请解锁查看",
          xm: "请解锁查看",
          yzyxxmc: "请解锁查看",
          zcj: "请解锁查看",
          cs: "请解锁查看",
          fs: "请解锁查看",
        },
        {
          ssnf: "请解锁查看",
          zymc: "请解锁查看",
          zydm: "请解锁查看",
          researchDirection: "请解锁查看",
          xm: "请解锁查看",
          yzyxxmc: "请解锁查看",
          zcj: "请解锁查看",
          cs: "请解锁查看",
          fs: "请解锁查看",
        },
        {
          ssnf: "请解锁查看",
          zymc: "请解锁查看",
          zydm: "请解锁查看",
          researchDirection: "请解锁查看",
          xm: "请解锁查看",
          yzyxxmc: "请解锁查看",
          zcj: "请解锁查看",
          cs: "请解锁查看",
          fs: "请解锁查看",
        },
        {
          ssnf: "请解锁查看",
          zymc: "请解锁查看",
          zydm: "请解锁查看",
          researchDirection: "请解锁查看",
          xm: "请解锁查看",
          yzyxxmc: "请解锁查看",
          zcj: "请解锁查看",
          cs: "请解锁查看",
          fs: "请解锁查看",
        },
        {
          ssnf: "请解锁查看",
          zymc: "请解锁查看",
          zydm: "请解锁查看",
          researchDirection: "请解锁查看",
          xm: "请解锁查看",
          yzyxxmc: "请解锁查看",
          zcj: "请解锁查看",
          cs: "请解锁查看",
          fs: "请解锁查看",
        },
        {
          ssnf: "请解锁查看",
          zymc: "请解锁查看",
          zydm: "请解锁查看",
          researchDirection: "请解锁查看",
          xm: "请解锁查看",
          yzyxxmc: "请解锁查看",
          zcj: "请解锁查看",
          cs: "请解锁查看",
          fs: "请解锁查看",
        },
        {
          ssnf: "请解锁查看",
          zymc: "请解锁查看",
          zydm: "请解锁查看",
          researchDirection: "请解锁查看",
          xm: "请解锁查看",
          yzyxxmc: "请解锁查看",
          zcj: "请解锁查看",
          cs: "请解锁查看",
          fs: "请解锁查看",
        },
        {
          ssnf: "请解锁查看",
          zymc: "请解锁查看",
          zydm: "请解锁查看",
          researchDirection: "请解锁查看",
          xm: "请解锁查看",
          yzyxxmc: "请解锁查看",
          zcj: "请解锁查看",
          cs: "请解锁查看",
          fs: "请解锁查看",
        },
        {
          ssnf: "请解锁查看",
          zymc: "请解锁查看",
          zydm: "请解锁查看",
          researchDirection: "请解锁查看",
          xm: "请解锁查看",
          yzyxxmc: "请解锁查看",
          zcj: "请解锁查看",
          cs: "请解锁查看",
          fs: "请解锁查看",
        },
        {
          ssnf: "请解锁查看",
          zymc: "请解锁查看",
          zydm: "请解锁查看",
          researchDirection: "请解锁查看",
          xm: "请解锁查看",
          yzyxxmc: "请解锁查看",
          zcj: "请解锁查看",
          cs: "请解锁查看",
          fs: "请解锁查看",
        },
      ];
      loading.value = false;
    }
    if (res.status === 0 && res.result.length > 0) {
      allData.value = res.result;
      tableData2.value = res.result;
      loading.value = false;
      isUnlock.value = false;
    } else {
      tableData2 = [];
      allData = [];
      selectYear.value = "";
      yearOptions.value = [];
      loading.value = false;
    }
  } catch (error) {
    loading.value = false;
    // throw new Error(error)
  }
}
// 获取考试范围
async function getExamRange() {
  try {
    loading.value = true;
    const data = {
      majorOutRelationId: props.majorId,
    };
    const result = await examRange(data);
    const res = JSON.parse(decrypt(result));
    console.log(res);
    if (res.status == 666) {
      ElMessage({
        message: res.msg,
        type: "warning",
        showClose: true,
      });
      isUnlock.value = true;
      emit("onChange", { isUnlock: true });
      obj.value = {
        researchDirection: "请解锁查看",
        examContentsPolitics: "请解锁查看",
        examContentsEnglish: "请解锁查看",
        examContentsOther1: "请解锁查看",
        examContentsOther2: "请解锁查看",
        examContents: "请解锁查看",
      };
    }
    if (res.status === 0) {
      isUnlock.value = false;
      obj.value = res.result;
    }
    loading.value = false;
  } catch (error) {
    loading.value = false;
    // throw new Error(error)
  }
}
// 将 myMethod 暴露给父组件
defineExpose({ childMethod });
function childMethod() {
  getExamRange();
  getEarlyRefer();
  getFuRefer();
}
onMounted(() => {
  getExamRange();
  getEarlyRefer();
  getFuRefer();
});
// 合并表头
function headerCellStyle({ row, column, rowIndex, columnIndex }) {
  // 由于是多级表头 -- 合并目标表头在第三层 -- 寻找第三级表头
  if (row[0].level === 2) {
    row[0].colSpan = 3;
    row[1].colSpan = 0;
    row[2].colSpan = 0;
    // 根据列数进行样式赋予
    if (columnIndex === 1 || columnIndex === 0 || columnIndex === 2) {
      return { display: "none" };
    }
  }
  // return {
  //   color: "#333333",
  //   fontWeight: "bold",
  //   textAlign: "center",
  // };
}
// 合并表尾
function getSummaries() {
  return ["", "", "", ""];
}
</script>
<style lang="less" scoped>
::v-deep .el-tabs__nav {
  padding-left: 80px;
}
::v-deep .el-card__body {
  padding: 0 !important;
}
.exam-scope {
  .con {
    margin: 0 auto;
    width: 900px;
    border: 1px solid #dcdfe6;
    .item {
      display: flex;
      align-items: center;
      //height: 44px;
      line-height: 24px;
      border-bottom: 1px solid #dcdfe6;
      &:last-child {
        border-bottom: none;
      }
      .left {
        padding: 0 12px;
        width: 65px;
        text-align: center;
      }
      .right {
        flex: 1;
        padding: 4px 12px;
        border-left: 1px solid #dcdfe6;
      }
    }
  }
}
.mohu {
  position: relative;
  z-index: 9;
}

.mohu-filter {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
